<template>
    <div v-loading="loading" class="record-detail-container" style="width: 100%;">
        <SavePage :title="form.code" :has-back="false">
            <template slot="buttons">
                <BaseButton v-permission="{ btnCode: 'dlyh_d411_e11_2' }" :loading="visaLoading" type="second" @click="handleExport(1)">导出签证单</BaseButton>
                <BaseButton v-permission="{ btnCode: 'dlyh_d411_e12_2' }" :loading="cardLoading" type="second" @click="handleExport(2)">导出档案卡</BaseButton>
                <BaseButton v-show="form.msStatus !==2 && form.msStatus !==3" v-permission="{ btnCode: 'dlyh_c84_d413_2' }" type="second" @click="handleDelete">删除</BaseButton>
                <BaseButton v-show="form.msStatus !==2 && form.msStatus !==3" v-permission="{ btnCode: 'dlyh_c84_d412_2' }" @click="handleEdit">编辑</BaseButton>
            </template>
            <template slot="body">
                <div class="header-box">
                    <div class="contract-info">
                        <div class="title">
                            <span class="name">{{ form.recordCode }}</span>
                            <div class="status">
                                <span class="dot" :style="`background-color: ${metrologicalStatusColor[form.msStatus]};`"></span>  
                                <span>{{ form.msStatusName }}</span>
                            </div>
                        </div>
                        <div class="des">
                            <div class="item">
                                <span class="label">所属合同编号：</span>
                                <span class="value">{{ form.contractCode }}</span>
                            </div>
                            <div class="item">
                                <span class="label">养护日期：</span>
                                <span class="value">{{ form.maintDate }}</span>
                            </div>
                            <div class="item">
                                <span class="label">施工单位：</span>
                                <span class="value">{{ form.constructionUnitName }}</span>
                            </div>
                            <div class="item">
                                <span class="label">关联的计量申请单：</span>
                                <span class="value" style="color: #0062ff;cursor: pointer;" @click="handleToApplication">{{ form.applicationId }}</span>
                            </div>
                        </div>
                    </div>
                    
                </div>
                <TitleTips title="基本信息" />
                <el-form size="medium" label-width="100px">
                    <el-row :gutter="24">
                        <el-col :xl="6" :lg="8">
                            <el-form-item label="项目名称：">
                                <span>{{ form.projectName }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :xl="6" :lg="8">
                            <el-form-item label="公路名称：">
                                <span>{{ form.highwayName }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :xl="6" :lg="8">
                            <el-form-item label="施工单位：">
                                <span>{{ form.constructionUnitName }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :xl="6" :lg="8">
                            <el-form-item label="现场管理：">
                                <span>{{ form.managementUnitName }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :xl="6" :lg="8">
                            <el-form-item label="养护日期：">
                                <span>{{ form.maintDate }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :xl="6" :lg="8">
                            <el-form-item label="任务来源：">
                                <span>{{ form.taskSource }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :xl="6" :lg="8">
                            <el-form-item label="类型：">
                                <span>{{ form.type | value2Name(recordTypeOptions, 'value', 'label') }}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :xl="12" :lg="16">
                            <el-form-item label="工作内容：">
                                <span>{{ form.workContent }}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                 
                <TitleTips title="养护明细" />

                <CardBox v-for="(item, index) in cardList" :key="item.id" :title="`分组${index + 1}`" style="padding-bottom: 32px">
                    <el-form :model="item" size="medium" label-width="110px">
                        <el-row :gutter="24">
                            <el-col :span="24">
                                <el-form-item label="位置类型：">
                                    <el-radio-group v-model="item.locationType" disabled>
                                        <el-radio :label="1">桩号</el-radio>
                                        <el-radio :label="2">桩号范围</el-radio>
                                        <el-radio :label="3">位置描述</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <!-- 位置描述 -->
                                <el-form-item v-if="item.locationType === 3" label="桩号部位：">
                                    <span>{{ item.locationDescription }}</span>
                                </el-form-item>
                                <!-- 桩号和桩号范围的方向-->
                                <el-form-item v-else label="桩号部位：">
                                    <span style="margin-right: 16px;">{{ item.direction | value2Name(directionOptions, 'value', 'label') }}</span>
                                
                                    <!-- 桩号 -->
                                    <template v-if="item.locationType === 1">
                                        <span>{{ item.startStakeNo }}</span>
                                    </template>
                                    <!-- 桩号范围 -->
                                    <template v-if="item.locationType === 2">
                                        <span>{{ `${item.startStakeNo} ~ ${item.endStakeNo}` }}</span>
                                    </template>
                                </el-form-item>
                                
                            </el-col>

                            <el-col :span="24">
                                <el-form-item label="完成工程量："></el-form-item>
                            </el-col>
                            <el-col :span="24" style="margin-bottom: 16px;">
                                <BaseTable ref="table" :columns="columns" :data="item.detailList"></BaseTable>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="施工前照片：">
                                    <div v-for="(m, i) in item.beforePhotos" :key="i" class="img-box">
                                        <el-image
                                            style="width: 100px; height: 100px; margin-right: 8px"
                                            :src="m.url"
                                            :preview-src-list="[item.previewSrc]"
                                            :z-index="99999"
                                            @click="item.previewSrc = m.url"
                                        >
                                        </el-image>
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="施工后照片：">
                                    <div v-for="(m, i) in item.afterPhotos" :key="i" class="img-box">
                                        <el-image
                                            style="width: 100px; height: 100px; margin-right: 8px"
                                            :src="m.url"
                                            :preview-src-list="[item.previewSrc]"
                                            :z-index="99999"
                                            @click="item.previewSrc = m.url"
                                        >
                                        </el-image>
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="简图、计算式、说明等：" label-width="170px">
                                    <span>{{ item.moreInstructions }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </CardBox>

                <TitleTips title="完成工程量汇总" />
                <BaseTable :columns="columns" :data="tableList" style="margin-bottom: 24px;"></BaseTable>

                <!-- 操作日志 -->
                <OperationLog title="操作日志" class-name="" :type="3"></OperationLog>
            </template>
        </SavePage>
    </div>
</template>

<script>
import { MaintenanceRecordManagementModel } from '@/models'
import { RecordTypeOptions, MetrologicalStatusOptions, MetrologicalStatusColor } from '@/views/maintenance-decision/constants'
import { value2Name } from '@/filters'
import reconfirm from '@/utils/reconfirm'
import { DirectionTwoWayOptions } from '@/config/constants'
import { MaintenanceRecordManagementApi } from '@/api'
import downLoad from '@/utils/blob-download'

import OperationLog from '@/views/maintenance-decision/daily-measurement/contract/detail/components/OperationLog.vue'

const ExportMap = {
    1: {
        api: 'exportVisaVoucherPath',
        loading: 'visaLoading'
    },
    2: {
        api: 'exportArchiveCardPath',
        loading: 'cardLoading'
    }
}

export default {
    name: 'RecordDetail',
    components: {
        OperationLog,
    },
    filters: {
        value2Name
    },
    data() {
        return {
            visaLoading: false,
            cardLoading: false,
            loading: true,
            model: new MaintenanceRecordManagementModel(),
            metrologicalStatusOptions: MetrologicalStatusOptions,
            metrologicalStatusColor: MetrologicalStatusColor,
            recordTypeOptions: RecordTypeOptions,
            directionOptions: DirectionTwoWayOptions,
            form: {
                lawTime: '',
                highwayCode: '',
                highwayName: '',
                lawAddress: '',
                lawLitigantName: '',
                lawPlant: '',
                compensation: '',
                alreadyCompensationFee: '',
                compensationTime: '',
                compensationDesc: '',
            },
            maintenanceRepairFeeTotal: 0,
            tableList: [],
            columns: Object.freeze([
                {
                    attrs: {
                        prop: 'number',
                        label: '序号',
                        width: '80',
                        type: 'index'
                    }
                },
                {
                    attrs: {
                        prop: 'listSubitemCode',
                        label: '清单子目编码',
                        width: '180',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'listSubitemName',
                        label: '清单子目名称',
                        width: '180',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'unitSymbol',
                        label: '单位',
                        width: '140',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'quantity',
                        label: '完成数量',
                        width: '140',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        prop: 'remark',
                        label: '备注',
                        'min-width': '100',
                        'show-overflow-tooltip': true
                    }
                }
            ]),
            cardList: [],
            id: ''
        }
    },
    computed: {
        // total() {
        //     let total = 0
        //     this.tableList.forEach(item => {
        //         total = Number(new BigNumber(item.compensationFee || 0).times(item.amount || 0).plus(total))
        //     })
        //     return total
        // }
    },
    async created() {
        this.id = this.$route.query.id
        this.getDetail()
    },
    methods: {
        handleExport(type) {
            this[ExportMap[type].loading] = true
            const path = MaintenanceRecordManagementApi[ExportMap[type].api]
            const params = {
                id: this.id,
                contractId: this.form.contractId
            }
            downLoad(path, params, '', 'Excel', () => {
                this[ExportMap[type].loading] = false
            })
        },

        handleToApplication() {
            this.$router.push({
                name: 'MeasurementApplicationDetail',
                query: {
                    id: this.form.applicationId,
                    pageType: 'detail'
                }
            })
        },
        // 获取编辑时需要的详情数据
        getDetail() {
            this.model.detail({ id: this.id }).then(res => {
                this.form = res
                this.tableList = res.countList || []
                this.cardList = (res.detailList || []).map(item => {
                    return {
                        ...item,
                        beforePhotos: item.beforePhotos ? JSON.parse(item.beforePhotos) : [],
                        afterPhotos: item.afterPhotos ? JSON.parse(item.afterPhotos) : [],
                        previewSrc: ''
                    }
                })
            }).finally(() => {
                this.loading = false
            })
        },
        handleDelete() {
            reconfirm({
                text: '确定删除该记录？</br>删除后无法恢复，请谨慎操作！',
                type: 'error',
                dangerouslyUseHTMLString: true,
                callback: () => {
                    return this.model.delete({ id: this.id }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功！',
                            duration: 500,
                            onClose: () => {
                                this.$router.go(-1)
                            }
                        })
                    })
                }
            })
        },
        handleEdit() {
            this.$router.push({
                name: 'MaintenanceRecordManagementEdit',
                query: { id: this.form.id, type: 'add' }
            })
        },
    }
}
</script>
<style>
.record-detail-container {
    /* 让单选框禁选时也高亮 */
    .el-radio__input.is-checked+.el-radio__label {
        color: #0162FF !important;
    }
    .el-radio__input.is-checked .el-radio__inner {
        border-color: #0162FF !important;
        background-color: #0162FF !important;
    }
    .el-radio__input.is-disabled .el-radio__inner::after {
        background-color: #F5F7FA !important;
    }
}

</style>
<style lang="scss" scoped>
.header-box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.contract-info {
    font-size: 16px;
    flex: 1;
    margin-right: 24px;
    max-width: 1200px;
    width: 90%;
    .title {
        display: flex;
        align-items: center;
        margin-bottom: 24px;
    }
    .name {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-weight: bold;
    }
    .status {
        display: inline-block;
        width: 90px;
        font-size: 14px;
        padding-left: 16px;
        flex-shrink: 0;
    }
}
.des {
    display: flex;
    justify-content: space-between;
    .item {
        margin-bottom: 24px;
        font-size: 14px;
        display: flex;
        align-items: flex-start;
        .label {
            color: #171725;
            flex-shrink: 0;
        }
        .value {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #44444f;
        }
    }
}
.table-footer {
    background-color: #f6f6f6;
    padding: 8px 20px;
    text-align: right;
    font-size: 14px;
    margin-bottom: 24px;
}
.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
    margin-bottom: 1px;
}
.img-box {
    display: inline-block;
    position: relative;
    margin-bottom: 16px;
    // .img-name {
    //     position: absolute;
    //     left: 50%;
    //     bottom: -20px;
    //     transform: translateX(-50%);
    // }
}
</style>
